<!--1. 实现一个盒子水平居中（起码两种方式） -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
           margin: 0;
            padding: 0;
          }   
		.body {
			margin: 0;
			padding: 0;
		}
		/* 方法一：给div设置宽度后将margin 的上下设置为0，左右设置为auto */
		/*.box {
		    width: 300px;
		    height: 200px;
		    background-color: skyblue;
		    margin: 0 auto;
		}*/
		/*方法二：绝对定位居中*/
		/*.box {
			position:  absolute;
			width: 300px;
			height: 200px;
			position:  absolute;
			left: 50%;
			top: 0;
			background-color: skyblue;
		}*/
		/*方法三：使小盒子变成行内块从而在大盒子中使用text-align属性 */
		/*.container {
			text-align: center;
			background: rgba(0,0,0,0.2);
		}
		.box {
			width: 300px;
			height: 200px;
			background-color: skyblue;
			display: inline-block;
		}*/
		/*2. 使用@keyframes和animation实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位，5S完成动画并一直重复*/
        .box {
           width: 60px;
           height: 45px;
           background-color: skyblue;
           animation: move 5s linear infinite;
        }
       @keyframes move {
         0% {
            transform: translate(0);
        }
         25% {
            transform: translateX(500px);
         }
         50% {
           transform: translateX(500px) translateY(500px);
         }
         75% {
           transform: translateX(0) translateY(500px);
         }
         100% {
           transform: translate(0);
         }
        }

	</style>
</head>
<body>
	<div class="box"></div>
	<!-- <div class="container">
		<div class="box"></div>
	</div> -->
</body>
</html>

